<style>
	.top-bar {
		z-index: 99999999;
	}
	.main-body {
		background: url(../../assets/img/corruption-data.png) no-repeat;
		background-size: 100vw calc(100vh - 60px);
		z-index: 9999999;
	}

	.main-body > div {
		top: 0;
	}

	.corrData-container {
		height: calc(100vh - 60px);
		padding: 20px;
	}

	.top {
		width: 90%;
		display: flex;
		justify-content: space-between;
	}

	.time,.month-sel {
		background: rgba(0,59,165,0.35);
		border-image: linear-gradient(270deg, rgba(0, 216, 255, 0), rgba(0, 195, 255, 1), rgba(0, 175, 255, 0)) 1 1;
		color: #FFFFFF;
	}

	.time {
		width: 238px;
		height: 65px;
		line-height: 65px;
		text-align: center;
		font-size: 16px;
	}

	.month-sel {
		width: 233px;
		height: 41px;
		border-radius: 5px;
		padding: 0 10px;
    font-size: 14px;
	}

	.content {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.c1,.c2,.c3 {
		height: 390px;
		background: rgba(62,158,255,0.3);
		position: relative;
		padding: 20px;
	}

	.c1,.c2 {
		width: 30%;
	}
	.c3 {
		width: 39%;
	}

	.c4,.c5,.c6 {
		margin-top: 18px;
		height: 340px;
		background: rgba(62,158,255,0.3);
		border-radius: 5px;
		position: relative;
	}
	.c4 {
		width: 55%;
	}
	.c5 {
		width: 18%;
	}
	.c6 {
		width: 26%;
	}

	.data-title {
		position: absolute;
		top: 15px;
		left: 20px;
		font-size: 14px;
		color: #FFFFFF;
		height: 40px;
		line-height: 40px;
		width: 300px;
		padding-left: 10px;
		background: url(../../assets/img/corruption-title.png) no-repeat;
		background-size: 100% 100%;
	}
	.chart-wrap {
		margin-top: 40px;
		height: 300px;
	}

	.corr-table {
		margin-top: 50px;
		border: 1px solid #00C8FF;
		height: 85%;
		max-height: 85%;
		overflow-y: auto;
	}

  	table {
		width: 100%;
	}

	tr {
		height: 48px;
	}

	th,td {
		font-size: 12px;
		color: #FFFFFF;
		padding-left: 10px;
	}

	td {
		opacity: 0.8;
	}

	.tr-deep {
		background: rgba(0,59,165,0.35);
		border-image: linear-gradient(270deg, rgba(0, 216, 255, 0), rgba(0, 195, 255, 1), rgba(0, 175, 255, 0)) 1 1;
	}

	.red {
		color: #FF7575;
	}
	.green {
		color: #00FFAB;
	}
	.yellow {
		color: #FFCA00;
	}

	::-webkit-scrollbar {
		width: 6px;
	}

	::-webkit-scrollbar-track {
		background: unset;
	}

	::-webkit-scrollbar-thumb {
		background: #00CAFF;
		border-radius: 3px;
	}
</style>
<div class="corrData-container">
	<div class="top">
		<div class="time">日期：{{ todayStr }}</div>
		<input type="text" class="month-sel" ng-model="condition.month"
			datepicker-popup="{{'yyyy-MM'}}" datepicker-options="{datepickerMode:'month',minMode:'month'}"
			ng-click="monthDateEndShow=false;monthDateEndShow=!monthDateEndShow"
			ng-change="handleSearch(condition.month)"
			is-open="monthDateEndShow" close-text="关闭" modal-size="small" readonly>
	</div>
	<div class="content">
		<div class="c1">
			<div class="data-title">实时异常统计</div>
			<div class="corr-table">
				<table>
					<tr>
						<th>所属业务</th>
						<th>业务表单</th>
						<th>预警数量</th>
						<th>已处理数量</th>
					</tr>
					<tr ng-repeat="item in datas track by $index" ng-class="{'tr-deep':$even}">
						<td>{{ item.header }}</td>
						<td>{{ item.title }}</td>
						<td class="red">{{ item.warnCount }}</td>
						<td class="green">{{ item.warnDoneCount }}</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="c2">
			<div class="data-title">异常督办统计</div>
			<div class="corr-table">
				<table>
					<tr>
						<th>所属业务</th>
						<th>业务表单</th>
						<th>督办数量</th>
						<th>已处理数量</th>
					</tr>
					<tr ng-repeat="item in datas track by $index" ng-class="{'tr-deep':$even}">
						<td>{{ item.header }}</td>
						<td>{{ item.title }}</td>
						<td class="red">{{ item.dbdCount }}</td>
						<td class="green">{{ item.dbdDoneCount }}</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="c3">
			<div class="data-title">月度廉情预警统计</div>
			<div class="corr-table">
				<table>
					<tr>
						<th>所属业务</th>
						<th>业务表单</th>
						<th>异常数量</th>
						<th>督办数量</th>
						<th>完结数量</th>
						<th>线索数量</th>
					</tr>
					<tr ng-repeat="item in datas track by $index" ng-class="{'tr-deep':$even}">
						<td>{{ item.header }}</td>
						<td>{{ item.title }}</td>
						<td class="red">{{ item.warnCount }}</td>
						<td class="yellow">{{ item.dbdCount }}</td>
						<td class="green">{{ item.dbdDoneCount }}</td>
						<td>{{ item.clewCount }}</td>
					</tr>
				</table>
			</div>
		</div>

		<div class="c4">
			<div class="data-title">销售模块异常统计</div>
			<div yb-bar-chart class="chart-wrap" chart-axis="echartsOption1"></div>
		</div>
		<div class="c5">
			<div class="data-title">采购模块异常统计</div>
			<div yb-bar-chart class="chart-wrap" chart-axis="echartsOption2"></div>
		</div>
		<div class="c6">
			<div class="data-title">仓储物流异常统计</div>
			<div yb-bar-chart class="chart-wrap" chart-axis="echartsOption3"></div>
		</div>
	</div>
</div>